<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import Forms from '../forms/forms.vue'
import MarkdownIt from 'markdown-it'
const props = defineProps({
  artData: {
    type: Object,
    default: () => ({})
  },
  submit: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['formData', 'centent'])
//获得form内容
const formData = (value: any) => {
  emit('formData', value)
}
const centent = (value: any) => {
  emit('centent', value)
}

// 创建 markdown-it 实例
const md = new MarkdownIt({
  html: true,        // 启用 HTML 标签
  linkify: true,     // 自动转换 URL 为链接
  typographer: true  // 启用智能引号等
})
// 编辑器内容
const markdownContent = ref('')
// 渲染后的 HTML
const renderedHtml = computed(() => {
  return md.render(markdownContent.value)
})
watch( renderedHtml, (newValue) => {
    centent(newValue)
})
watch(
    () => props.artData,
    (newData) => {
       markdownContent.value = newData.content
    }
)

</script>
<template>
  <div class="editor">
    <div class="editor-container">
      <Forms style="width: 80%;" :classify="0" @formData="formData" :artData="props.artData" :submit="props.submit" />
      <div class="editor-container-md">
        <!-- 编辑区域 -->
        <div class="editor-container-md-input">
          <textarea v-model="markdownContent" placeholder="输入 Markdown 内容..." :rows="25" />
        </div>
        <!-- 预览区域 -->
        <div class="editor-container-md-preview">
          <div class="markdown-preview" v-html="renderedHtml" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.editor {
  width: 100%;

  &-container {
    width: 100%;
    background-color: @bg-color-l;
    border-radius: @radius-m;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: @space-xl;
    &-md {
      width: 100%;
      display: flex;
      border-top: 2px solid @bg-color-m;
      &-input {
        width: 100%;
        padding: @space-l @space-xl;

        textarea {
          width: 100%;
          background-color: @bg-color-l;
          border: none;
          resize: none;
          .font-l();
          color: @font-color-l;

          &:focus {
            outline: none;
            box-shadow: none;
          }
        }
      }

      &-preview {
        width: 100%;
        padding: @space-l @space-xl;
        border-left: 1px solid @bg-color-m;
        .font-l();
        color: @font-color-l;
        // 🎯 新增：固定高度和滚动条
        height: 650px; // 固定高度
        overflow-y: auto; // 垂直滚动条
        overflow-x: hidden; // 隐藏水平滚动条
        position: relative; // 相对定位

        .markdown-preview {
          // 🎯 新增：预览内容样式
          min-height: 100%; // 最小高度填满容器
          padding-right: 10px; // 给滚动条留空间
          
          // 自定义滚动条样式（可选）
          &::-webkit-scrollbar {
            width: 6px;
          }
          
          &::-webkit-scrollbar-track {
            background: @bg-color-l;
            border-radius: 3px;
          }
          
          &::-webkit-scrollbar-thumb {
            background: @font-color-l;
            border-radius: 3px;
            
          }
        }
      }
    }
  }
}
</style>
